<!--  -->
<template>
    <el-dialog v-model="dialogFormVisible" width="50%">
        <el-scrollbar class=" content">
            <h1>总计：<span>￥{{ totalPrice.toFixed(2) }}</span></h1>
            <DetailItem v-for="(item, index) in ordersDetail" :key="index" :detail="item"></DetailItem>
        </el-scrollbar>
    </el-dialog>
</template>

<script setup lang="ts">
import DetailItem from './detail_item/index.vue'
import { onMounted, ref, computed } from 'vue'
import $bus from '../../../bus'
import { AllGoods } from '../../../api/info/orders/type'

let ordersDetail = ref<AllGoods>([])
let dialogFormVisible = ref<Boolean>(false)
onMounted(() => {
    $bus.on('show', (data: any) => {
        dialogFormVisible.value = data.isShow
        ordersDetail.value = data.row.orderDetails

    })
})
const totalPrice = computed(() => {
    return ordersDetail.value.reduce((total, item) => total + (item.productPrice * item.productQty), 0)
})

</script>

<style lang="scss" scoped>
h1 {
    font-weight: bold;
    padding: 20px 0;

    span {
        color: red;
    }
}

.content {
    padding: 0px 30px;
    height: 470px;
}
</style>